<template>
  <div class="flow_box">
    <div class="title">流程跟踪</div>
    <bpmn :id="id"></bpmn>
    <div class="title">历史记录</div>
    <InnerPageTable ref="listTable" :config="pageTableConfig">
    </InnerPageTable>
  </div>
</template>

<script>
import bpmn from "@/components/bpmn";
import { superviseInfoAPI } from "@api/superviseInfo";
export default {
  name: "flowImage",
  props: {
    id: {
      type: String,
      default: ''
    },
  },
  components: {
    bpmn
  },
  data() {
    return {
      pageTableConfig: {
        loadDataFn: this.getTableList,
        columns: [
          { title: '审批人', key: 'userName' },
          { title: '节点', key: 'actName' },
          { title: '审批时间', key: 'time' },
          { title: '动作', key: 'actionName' },
          { title: '审批内容', key: 'message' },
        ],
        initParam: {
          id: ''
        },
        autoFirst: true,
        isPage: false
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$emit('SetPageWidth', 820)
    },
    getTableList(tableObj) {
      let { responseProcess, param, initParam } = tableObj;
      const params = {
        ...initParam,
        ...param
      }
      superviseInfoAPI.getFlowHistory({ id: this.id }).then(res => {
        const data ={records :res.data}
        responseProcess(data)
      })
    },
  }
};
</script>

<style scoped lang="less">
.flow_box{
  .title{
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
